<template>
  <div class="mainBody">

    <el-header class="header">
      <el-row class="control">
        <el-col :span="12">
          <span class="FilterParameters">数据源名称：</span>
          <el-input class="searchInput" v-model="searchKeyword" placeholder="请输入内容" />
        </el-col>

        <!--查找、新增功能按钮-->
        <el-col :span="12">
          <el-button type="primary" icon="el-icon-c-scale-to-original" class="find" >过滤</el-button>
          <el-button type="primary" icon="el-icon-refresh" >恢复</el-button>
          <el-button style="margin-left: 20px" type="success" @click="visibleAddDataSource = true">新增</el-button>
        </el-col>
      </el-row>
    </el-header>

    <el-main>
      <el-table
        height="100%"
        border
        :data="showTableData"
        :row-class-name="tableRowClassName"
      >
        <!--序号-->
        <el-table-column
          width="50"
          type="index"
          label="序号"
        >
        </el-table-column>
        <!--数据源名称-->
        <el-table-column
          prop="dataSourceName"
          label="数据源名称"
        >
        </el-table-column>
        <!--数据源标识-->
        <el-table-column
          prop="dataSourceIdentification"
          label="数据源标识"
        >
        </el-table-column>
        <!--数据库类型-->
        <el-table-column
          prop="databaseType"
          label="数据库类型"
        >
        </el-table-column>
        <!--URL-->
        <el-table-column
          prop="url"
          label="URL"
        >
        </el-table-column>
        <!--责任方-->
        <el-table-column
          prop="responsibleParty"
          label="责任方"
        >
        </el-table-column>
        <!--启用状态-->
        <el-table-column
          prop="enableStatus"
          label="启用状态"
        >
        </el-table-column>

        <el-table-column
          label="操作"
          width="280"
        >
          <template slot-scope="scope">
            <el-button type="success" size="mini" @click="rowTest(scope.$index, scope.row)">测试</el-button>
            <el-button type="primary" size="mini" @click="rowEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button type="warning" size="mini" @click="rowStop(scope.$index, scope.row)">停用</el-button>
            <el-button type="danger" size="mini" @click="rowDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>

      </el-table>
    </el-main>

    <el-footer id="Footer">
      <!--分页功能-->
      <!--当前行数与总数据条数-->
      <el-row :gutter="30">
        <el-col :span="19">
          <div id="now_line_number">共{{totalNumber}}条数据</div>
        </el-col>
        <el-col :span="5">
          <div>
            <el-pagination
              id="controlBigPosition"
              background
              :current-page="currentPage"
              :page-sizes="[20, 50, 100, 200, 300]"
              :page-size="size"
              layout="sizes, prev, pager, next, jumper"
              :total="totalNumber"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-col>
      </el-row>
    </el-footer>




    <el-dialog
      top="10vh"
      title="新增数据源"
      :visible.sync="visibleAddDataSource"
      width="30%"
    >
      <el-form class="addDataSourceForm" :model="addDataSourceForm" label-width="100px">
        <el-form-item label="数据源名称">
          <el-input v-model="addDataSourceForm.dataSourceName" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="数据源标识">
          <el-input v-model="addDataSourceForm.dataSourceIdentification" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="数据库类型">
          <el-input v-model="addDataSourceForm.databaseType" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="主机名或IP">
          <el-input v-model="addDataSourceForm.hostNameOrIp" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="端口">
          <el-input v-model="addDataSourceForm.port" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="用户名">
          <el-input v-model="addDataSourceForm.userName" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="addDataSourceForm.password" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="SID">
          <el-input v-model="addDataSourceForm.sid" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="初始数据库名">
          <el-input v-model="addDataSourceForm.initialDatabaseName" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="URL">
          <el-input v-model="addDataSourceForm.url" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="责任方">
          <el-input v-model="addDataSourceForm.responsibleParty" placeholder="请输入"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="success">测 试</el-button>
        <el-button @click="visibleAddDataSource = false">取 消</el-button>
        <el-button type="primary" @click="confirmAddDataSource()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>

export default {
  name: "OnlineWarehouseManage",
  components: {
  },
  data(){
    return {
      currentPage: 1,
      size: 20,
      totalNumber: 7,
      visibleAddDataSource: false,
      addDataSourceForm: {
        //数据源名称
        dataSourceName: "",
        //数据源标识
        dataSourceIdentification: "",
        //数据库类型
        databaseType: "",
        //主机名或IP
        hostNameOrIp: "",
        //端口
        port: "",
        //用户名
        userName: "",
        //密码
        password: "",
        //SID
        sid: "",
        //初始数据库名
        initialDatabaseName: "",
        //URL
        url: "",
        //责任方
        responsibleParty: "",
      },
      searchKeyword: "",
      showTableData: [],
      allTableData: [
        {
          //数据源名称
          dataSourceName: "数据源1",
          //数据源标识
          dataSourceIdentification: "数据源标识1",
          //数据库类型
          databaseType: "数据库类型1",
          //URL
          url: "URL1",
          //责任方
          responsibleParty: "责任方1",
          //启用状态
          enableStatus: "已启用",
        },
        {
          //数据源名称
          dataSourceName: "数据源2",
          //数据源标识
          dataSourceIdentification: "数据源标识2",
          //数据库类型
          databaseType: "数据库类型2",
          //URL
          url: "URL2",
          //责任方
          responsibleParty: "责任方2",
          //启用状态
          enableStatus: "已启用",
        },
        {
          //数据源名称
          dataSourceName: "数据源3",
          //数据源标识
          dataSourceIdentification: "数据源标识3",
          //数据库类型
          databaseType: "数据库类型3",
          //URL
          url: "URL3",
          //责任方
          responsibleParty: "责任方3",
          //启用状态
          enableStatus: "已停用",
        },
        {
          //数据源名称
          dataSourceName: "数据源4",
          //数据源标识
          dataSourceIdentification: "数据源标识4",
          //数据库类型
          databaseType: "数据库类型4",
          //URL
          url: "URL4",
          //责任方
          responsibleParty: "责任方4",
          //启用状态
          enableStatus: "已启用",
        },
        {
          //数据源名称
          dataSourceName: "数据源5",
          //数据源标识
          dataSourceIdentification: "数据源标识5",
          //数据库类型
          databaseType: "数据库类型5",
          //URL
          url: "URL5",
          //责任方
          responsibleParty: "责任方5",
          //启用状态
          enableStatus: "已启用",
        },
        {
          //数据源名称
          dataSourceName: "数据源6",
          //数据源标识
          dataSourceIdentification: "数据源标识6",
          //数据库类型
          databaseType: "数据库类型6",
          //URL
          url: "URL6",
          //责任方
          responsibleParty: "责任方6",
          //启用状态
          enableStatus: "已停用",
        },
        {
          //数据源名称
          dataSourceName: "数据源7",
          //数据源标识
          dataSourceIdentification: "数据源标识7",
          //数据库类型
          databaseType: "数据库类型7",
          //URL
          url: "URL7",
          //责任方
          responsibleParty: "责任方7",
          //启用状态
          enableStatus: "已启用",
        },
      ]

    }
  },
  methods: {
    //每页最大条数
    handleSizeChange(val) {
      this.size = val;
      this.currentPage = 1;
      this.getAllTableData;
    },
    //当前页数
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getAllTableData();
    },
    //初始化mainBody的高度
    initMainBodyHeight() {
      //获取浏览器的高度，将mainBody的高度设置为屏幕的高度减去header的高度
      let screenHeight = document.documentElement.clientHeight;
      let headerHeight = 90;
      let mainBody = document.getElementsByClassName("mainBody")[0];
      mainBody.style.height = screenHeight - headerHeight + "px";
    },
    //表格行的样式
    tableRowClassName({row, rowIndex}) {
      if (row.enableStatus === '已停用') {
        return 'red';
      }
      return '';
    },
    //获取所有表格数据
    getAllTableData() {
      this.showTableData = this.allTableData.slice((this.currentPage - 1) * this.size, this.currentPage * this.size);
    },
    //测试
    rowTest(index, row) {
      console.log("测试", index, row);
    },
    //编辑
    rowEdit(index, row) {
      this.addDataSourceForm = row;
      this.visibleAddDataSource = true;
    },
    //停用
    rowStop(index, row) {
      // 提示是否确认停用
      this.$confirm('是否确认停用该数据源？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log("停用", index, row);
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消停用'
        });
      });
    },
    //删除
    rowDelete(index, row) {
      //提示是否确认删除
      this.$confirm('是否确认删除该数据源？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log("删除", index, row);
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //确认新增数据源
    confirmAddDataSource() {
      console.log("确认新增数据源");
    },
  },
  mounted() {
    this.initMainBodyHeight();
    this.getAllTableData();

  }
}
</script>


<style scoped>
>>>.el-table .red {
  color: red!important;
  //background: red!important;
}
.mainBody {
  width: 100%;
  height: 100%;

}
.header {
  width: 98%;
  padding-top: 12px;
  margin: 0 auto;
  border-bottom: 1px solid #d9d9d9;

  .searchInput{
    width: 10vw;
    margin-left: 1.3rem;
  }
}

</style>
